<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <style>
        .menu {
            display: flex;
        }

        .menu .item {
            flex: 1;
            text-align: center;
        }

        .menu .active {
            color: red;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="menu">
            <div class="item" v-for="item in list" :class="{active:activeIndex==item.id}" @click="change(item)">
                {{item.msg}}
            </div>
        </div>
        <div class="box">
            <component :is="com" @gotologin="gotologin"></component>
        </div>
    </div>

</body>
<template id="login">
    <div>
        <div>用户名<input v-model="username"></div>
        <div>密&nbsp;&nbsp;&nbsp;码<input v-model="userpwd"></div>
        <button @click="submit">提交</button>
    </div>
</template>
<template id="register">
    <div>
        <div>用户名<input v-model="username"></div>
        <div>密&nbsp;&nbsp;&nbsp;码<input v-model="userpwd"></div>
        <div>确认密码<input v-model="userrepwd"></div>
        <button @click="submit">提交</button>
    </div>
</template>
<script>
    let login = {
        data() {
            return {
                username: "",
                userpwd: "",
            }
        },
        template: "#login",
        methods: {
            async submit() {
                let { data: list } = await axios({
                    method: "get",
                    url: "http://localhost:2345/userinfos",
                    params: {
                        username: this.username,
                        userpwd: this.userpwd,
                    }
                })

                // 判断相等时才正确
                if (list.length) {
                    console.log(list[0]);//刚刚输入正确的信息,list是一个集合
                    let info = list[0];
                    // window.localStorage.setItem("info", info);
                    window.localStorage.setItem("info", JSON.stringify(info));
                    
                } else {
                    alert("用户名或密码错误");
                }
            }
        }
    }
    let register = {
        data() {
            return {
                username: "",
                userpwd: "",
                userrepwd: "",

            }
        },
        template: "#register",
        methods: {
            async submit() {
                let { data: list } = await axios({
                    method: "get",
                    url: "http://localhost:2345/userinfos",
                    params: {
                        username: this.username
                    },
                });
                console.log(this.username);
                console.log(this.userpwd);

                // 判断相等时则用户名存在
                if (list.length) {
                    alert("对不起,你输入的用户名已存在");
                    return false;
                }

                if (this.userpwd != this.userrepwd) {
                    alert("重复密码错误");
                    return false;
                }

                await axios({
                    method: "post",
                    url: "http://localhost:2345/userinfos",
                    data: {
                        username: this.username,
                        userpwd: this.userpwd,
                    }
                })

                this.$emit("gotologin");

            }
        }
    }

    new Vue({
        el: "#app",
        data: {
            com: "login",
            activeIndex: 1,
            list: [{ id: 1, msg: "登录", com: "login" }, { id: 2, msg: "注册", com: "register" }]
        },
        //获取已存在的用户信息
        // created() {
        //     let info = window.localStorage.getItem("userinfo");//获取用户信息
        //     if (info) {//表示有
        //         this.flag = true;
        //         this.info = JSON.parse(info);
        //     } else {
        //         this.flag = false;
        //     }

        // },
        components: {
            login,
            register,
            // detail,
        },
        methods: {
            change(item) {
                this.activeIndex = item.id;
                this.com = item.com;
            },

            gotologin() {
                this.activeIndex = 1;
                this.com = "login";
            }
        }
    })

</script>

</html>